<template>
  <div class="logincontainer">
    <el-form
      class="loginForm"
      :model="loginForm"
      ref="loginForm"
      :inline="false"
      size="normal"
      :rules="rules"
    >
      <el-form-item label="" size="normal">
        <div class="loginTitle">系统登录</div>
      </el-form-item>
      <el-form-item label="" prop="usernamne">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code" label="" size="normal">
        <el-row :gutter="20">
          <el-col :span="16" :offset="0">
            <el-input
              v-model="loginForm.code"
              placeholder="请输入验证码"
            ></el-input>
          </el-col>
          <el-col :span="8" :offset="0">
            <el-input v-model="loginForm.code"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="" size="normal">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-button class="btn" @click="handlerLogin" type="primary" size="default"
              >登录</el-button
            >
          </el-col>
          <el-col :span="12" :offset="0">
            <el-button class="btn" type="default" size="default"
              >取消</el-button
            >
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  //存储数据的地方，页面需要展示的数据，需要显示的放到data里面
  data() {
    return {
      //存储登录表单数据的地方，是双向数据绑定
      loginForm: {
        username: "admin",
        password: "123456",
        code: "",
      },
      //登录验证规则
      rules:{
        username:[
          {
            required:true,
            trigger:'change',
            message:'请输入用户名'
          }
        ],
        password:[
          {
            required:true,
            trigger:'change',
            message:'请输入密码'
          }
        ],
        code:[
          {
            required:true,
            trigger:'change',
            message:'请输入验证码'
          }
        ]
      }
    };
  },
  methods:{
    handlerLogin(){
      //表单验证
      this.$refs.loginForm.validate(valid =>{
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.logincontainer {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginForm {
    width: 450px;
    height: 350px;
    border-radius: 10px;
    box-shadow: 0 0 25px #cac6c6;
    padding: 20px 35px;
    .loginTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: 600;
    }
    .btn {
      width: 100%;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
        userForm: {
            username: "",
            password: "",
            code: "",
        },
        rules:{
            username:[
            {
                required:true,
                trigger:'change',
                message:'请输入用户名'
            }
            ],
            password:[
            {
                required:true,
                trigger:'change',
                message:'请输入密码'
            }
            ],
            code:[
            {
                required:true,
                trigger:'change',
                message:'请输入验证码'
            }
            ]
        }
    };
  },
};
</script>
<style lang="scss" scoped>
.logincontiner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .loginForm {
    height: 350px;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 0 25px #cac6c6;
    padding: 20px 35px;
    .loginTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 24px;
    }
    .codeimg {
      border: 1px solid #dcdfe6;
      cursor: pointer;
    }
    .btn {
      width: 100%;
    }
  }
}
</style>
